<template>
  <div class="payDetail">
    <header class="header">
      <h1 class="ddfk">等待付款</h1>
      <h5 class="fdyqy">(房东已确认)</h5>
      <h4 class="Li-i">房东已确定您的订单，我们将为您保留至当天23点0分0秒前，逾期将失效，请尽快支付</h4>
      <h4>逾期订单出租人有权将房屋租给他人，您如想继续承租该房屋，须重新签约。</h4>
    </header>
    <house-list v-if="orderInfo.housePersons" class="order-house-info" :houseInfo="orderInfo.housePersons"></house-list>
    <div class="fd-info">
      <img class="avatar" :src="orderInfo.landlord.headImgUrl || defaultAvatar" alt="">
      <div class="name-phone">
        <p class="name">{{orderInfo.landlord.trueName}}&nbsp;&nbsp;{{orderInfo.landlord.nickName}} <i class="fd__icon">房东</i></p>
        <p class="phone" v-if="orderInfo.landlord.mobile">{{orderInfo.landlord.mobile.substr(0,3) + '****' + orderInfo.landlord.mobile.substr(-4)}}</p>
      </div>
      <img src="../../../../images/rent/order_phone.png" alt="" class="call" @click.stop="contactLandlor(orderInfo.landlord.id)">
    </div>
    <section class="row-yajin">
      
      <div class="row-title">押金</div>
      <ul class="fee-info">
        <li class="row1">
          <div class="clearfix row li-row">
            <div :class="{'icon__ok': !CreditMY, 'icon__uncheck': CreditMY}" @click="CreditMY = 0, $store.commit('pay/setCreditMYJ', 0)"></div>
            <span>{{betNumSwitch(orderInfo.housePersons.betNum || 1)}}</span>
            <!-- <checklist class="fl" :value="['押一']" :options="['押一']" @on-change="onChange"></checklist> -->
            <i class="fr">￥{{orderInfo.order.dMoney}}元</i>
          </div>
          <p class="row">传统模式，到期可退</p>
        </li>
        <li class="pingAn row2">
          <div class="clearfix row li-row">
            <div :class="{'icon__ok': CreditMY, 'icon__uncheck': !CreditMY}" @click="setCreditMYJ"></div>
            <span class="color__gray">信用免押</span>
            <!-- <checklist class="fl" :value="['']" :options="[{key:'0',value:'信用免押'}]" @on-change="onChange" :max="1"></checklist> -->
            <i class="fr">￥{{orderInfo.order.dMoney}}元</i>
          </div>
          <p class="row row__text">已获得信用免押资格</p>
          <p class="row row__text row__a"><a class="row__a" href="/myCredit">查询我的信用分></a></p>
        </li>
        <li class="row3">
          <div class="clearfix row li-row">
            <div :class="{'icon__ok': false, 'icon__uncheck': true}"></div>
            <span class="row color__gray" >平安免押险</span>
            <!-- <checklist class="fl" disabled :value="['']" :options="[{key:'0',value:'平安免押险'}]" :max="1"></checklist> -->
            <i class="fr">￥{{orderInfo.order.dMoney}}元</i>
          </div>
          <p class="row">平安履约险，最高赔偿给30万</p>
          <!-- <p class="row row__text">查看保险说明></p> -->
          >
        </li>
      </ul>
    </section>
    <ul class="fee-info">
      <li>租金<i class="fr">{{orderInfo.order.money}}元</i></li>
      <!-- <li>押金<i class="fr">{{orderInfo.order.dMoney}}元</i></li> -->
      <!-- <li>押金<span @click="showPrompt1"><img src="../../../../images/prompt.png" style="width:18px;height:18px;" alt=""></span> <i class="fr">{{orderInfo.order.dMoney}}元</i></li> -->
      <li>物业费<i class="fr">{{orderInfo.order.strataFee}}元</i></li>
      <li>合同电子证书费用<i class="fr">0</i></li>
      <li>合计<i class="fr">{{orderInfo.order.totalMoneyValue || orderInfo.order.totalMoney}}元</i></li>
    </ul>
    <ul class="zuke-info" v-for="(item, index) in orderInfo.contractPersons" :key="index" v-if="item">
      <li><i class="fl">入住人</i><i class="fl o-num">{{index + 1}}</i><i class="fr">{{item.trueName}}</i></li>
      <li>手机号<i class="fr">{{item.mobile.substr(0,3) + '****' + item.mobile.substr(-4)}}</i></li>
    </ul>
    <ul class="order-info">
      <li>订单号<i class="fr">{{orderInfo.order.orderCode}}</i></li>
      <li>下单时间<i class="fr">{{orderInfo.order.createTime}}</i></li>
    </ul>
    <x-dialog v-model="hintDialog2" class="dialog-hint">
      <!-- <h3 class="infoConfirm-hint">诚信免押</h3> -->
      <!-- <p class="hint-black">诚信免押注意事项：</p> -->
      <ol class="hint-content">
        <li>1.用户征信积分由腾讯征信提供;</li>
        <li>2.用户授权开通腾讯征信，如果用户的信用积分超过650（含）即可选择诚信免押服务，申请免押租房;</li>
        <li>3.选择诚信免押，用户若发生违约，会扣除相应额度，并扣除信用分，对个人买房、就业等会有影响。</li>
      </ol>
      <!-- <x-button type="primary" @click.native="hintDialog2 = false">我已知道</x-button> -->
      <i class="icon icon-close" @click="hintDialog2 = false"></i>
    </x-dialog>
    <ul class="payment-info">
      <li class="title">支付方式 </li>
      <li>
        <div :class="['payment-item', classPaymentWeChat]" @click.stop="selectPayWay('wechat')">
          <div class="panel">
            <p><img width="28px" src="../../../../images/icon_wechat.png"/><span class="name">微信支付</span><span class="radio"></span></p>
          </div>
          <div class="tips">支付限额，钱款可实时进入出租人零钱包账户可截屏微信支付记录，作为电子凭证</div>
        </div>
      </li>
      <!-- <li>
        <div :class="['payment-item', classPaymentUnionPay]" @click.stop="selectPayWay('unionPay')">
          <div class="panel">
            <p><img width="32px" src="../../../../images/icon_unionpay.png"/><span class="name">银联支付</span><span class="radio"></span></p>
          </div>
          <div class="tips">需要T+1天到账收款人账户，可获取电子凭证</div>
        </div>
      </li> -->
    </ul>
    <unionPay v-if="unionPayShow" @hiddenUnionPay="hideUnionPay" :unionpayInfo="payInfo" @unionPaySuccess="unionPaySuccessFun"></unionPay>
    <!--<payment v-model="paymentShow" :payInfo="payInfo"></payment>-->
    <div class="btn" @click.stop="pay">确认支付</div>
  </div>
</template>
<script>
  import houseList from '@/components/houseList'
  import unionPay from '@/components/unionPay'
  import { Checklist } from 'vux'
  export default {
    components: {
      houseList,
      unionPay,
      Checklist
    },
    data () {
      return {
        hintDialog2: false,
        paymentShow: true,
        payInfo: {},
        defaultAvatar: require('../../../../images/avatar_default.png'),
        serviceId: '',
        callImg: '',
        CreditMY: 0, // 是否选中诚信免押金
        orderInfo: {
          contractPerson: [],
          housePersons: '',
          landlord: '',
          order: '',
          renter: ''
        },
        payType: 'wechat', // 支付方式
        unionPayShow: false, // 是否显示银联支付
        classPaymentWeChat: 'payment-item-selected',
        classPaymentUnionPay: ''
      }
    },
    created () {
      this.serviceId = this.$route.query.serviceId
      this.getOrderDetail(this.serviceId)
      this.ueryCreditScore()
    },
    methods: {
      getOrderDetail (orderId) {
        this.$axiosPosting(this.$api.queryOrderDetail4Renter, {orderId}).then(res => {
          this.orderInfo = res.data
        })
      },
      setCreditMYJ () {
        if (this.score > 650) {
          this.CreditMY = 1
          this.$store.commit('pay/setCreditMYJ', 1)
        }
      },
      pay () {
        this.payInfo = {type: 'order', serviceId: this.serviceId}
        if (this.payType === 'wechat') {
          this.wechatPay()
        }
        if (this.payType === 'unionPay') {
          this.unionPayFun()
        }
      },
      // 选择支付方式
      selectPayWay (type) {
        this.payType = type
        if (this.payType === 'wechat') {
          this.classPaymentWeChat = 'payment-item-selected'
          this.classPaymentUnionPay = ''
        }
        if (this.payType === 'unionPay') {
          this.classPaymentWeChat = ''
          this.classPaymentUnionPay = 'payment-item-selected'
        }
      },
      ueryCreditScore () {
        let userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
        this.$axiosPosting(this.$api.queryCreditScore, {idCard: userInfo.idCard, name: userInfo.trueName}).then(res => {
          this.score = JSON.parse(res.data).data.score
        })
      },
      // 微信支付
      wechatPay () {
        let requestData = {
          type: 'order', // 分为order订单 或者 bill账单
          serviceId: this.payInfo.serviceId,
          openId: window.localStorage.getItem('openId')
//          openId: 'oGXMmwiFfH7wEbmGax17ty4uQZYU'
        }
        let _this = this
        _this.$emit('input', false)
//        'http://gxg.tunnel.qydev.com/ajweb/wechatpay/crateOrder.html'
        this.$axiosPosting(this.$api.crateOrder, requestData).then(json => {
          if (json.code === '0000') {
            /* eslint-disable */
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest', {
                'appId': json.data.appId,     //公众号名称，由商户传入
                'timeStamp': json.data.timeStamp,         //时间戳，自1970年以来的秒数
                'nonceStr': json.data.nonceStr, //随机串
                'package': json.data.package,
                'signType': json.data.signType,         //微信签名方式：
                'paySign': json.data.paySign //微信签名
              },
              function(res){
                if(res.err_msg === "get_brand_wcpay_request:ok") {
                  // _this.showDialog = true
                  _this.$router.push({path: '/dealDone', query: {timeStamp: json.data.timeStamp, payMethod: '微信支付', 'orderNumber': json.data.outTradeNo}})
                }     // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回    ok，但并不保证它绝对可靠。
              }
            )
          } else {
            _this.$vux.alert.show({
              title: '提示',
              content: json.msg
            })
          }
        })
      },
      // 银联支付
      unionPayFun () {
        this.unionPayShow = !this.unionPayShow
        this.$emit('input', false)
      },
      // 支付成功后回调函数
      unionPaySuccessFun (resData) {
        let time = resData.time
        let code = resData.code
        this.unionPayShow = !this.unionPayShow
        this.$emit('hiddenUnionPay', 'hidePayment')
        this.$router.push({path: '/dealDone', query: {timeStamp: time, payMethod: '银联支付', 'orderNumber': code}})
      },
      //
      hideUnionPay () {
        this.unionPayShow = false
      },
      onChange (val) {
        console.log(val)
      },
      // 联系房东
      contactLandlor (landlordId) {
        let virtualNum = ''
        let mobileTo = ''
        this.$axiosPosting(this.$api.getUserById, {userId: landlordId}).then(res => {
          if (res.code === '0000') {
            mobileTo = res.data.mobile
            step2()
          }
        })
        const step2 = () => {
          let userInfo = JSON.parse(window.localStorage.getItem('userInfo'))
          let mobileFor = userInfo ? userInfo.mobile : ''
          if (mobileFor) {
            if (virtualNum === '') {
              this.$axiosPosting(this.$api.getVirtualNum, {mobileFor, mobileTo}).then(res => {
                let data = ''
                if (res.code === '0000') {
                  data = JSON.parse(res.data)
                }
                if (res.code === '0000' && data.errorCode === '0') {
                  virtualNum = data.virtualNum
                  window.location.href = `tel:${virtualNum}`
                } else {
                  this.$vux.toast.text('无法获取房东电话')
                  virtualNum = ''
                }
              })
            } else {
              window.location.href = `tel:${virtualNum}`
            }
          } else {
            this.$router.replace('/login')
          }
        }
      },
      showPrompt1 () {
        this.hintDialog2 = true
      },
      betNumSwitch (betNum) {
        switch (betNum) {
          case 1 : return '押一'
          break
          case 2 : return '押二'
          break
          case 3 : return '押三'
          break
        }
      }
    }
  }
</script>
<style lang="less">
  .payDetail {
    padding-bottom: 70px;
    header {
      height: 173px;
      background-color: #ff9600;
      text-align: center;
      box-sizing: border-box;
      color: white;
      position: relative;
      .ddfk {
        padding-top: 14px;
        font-size: 23px;
      }
      .fdyqy {
        color: #B9D7FF;
      }
      .Li-i {
        margin-top: 10px;
      }
      h4 {
        margin-top: 3px;
        font-size: 12px;
        text-align: left;
        padding: 0 22px;
      }
    }
    .order-house-info {
      border-bottom: 6px solid #F3F3F3;
    }
    .fd-info {
      height: 85px;
      /*line-height: 85px;*/
      padding: 6px 18px 0 18px;
      box-sizing: border-box;
      border-top: 6px solid #F3F3F3;
      border-bottom: 6px solid #F3F3F3;
      font-size: 15px;
      >img,>div {
        float: left;
      }
      .name-phone {
        display: inline-block;
        margin-left:8px;
        box-sizing: border-box;
        padding-top: 3px;
      }
      .phone {
        color: #777777;
      }
      img.call {
        width: 38px;
        height: 38px;
        display: inline-block;
        margin-top: 8px;
        float: right;
      }
      .avatar {
        display: inline-block;
        width: 55px;
        height: 55px;
        border-radius: 50%;
        /*margin-left: 15px;*/
      }
      .fd__icon {
        font-style: normal;
        font-size: 12px;
        background-color: #ff9600;
        color: white;
        display: inline-block;
        padding: 0px 8px;
        border-radius: 6px;
        position: relative;
        top: -1px;
      }
    }
    .btn {
      background-color:#ff9600;
      height: 45px;
      line-height: 45px;
      width:100vw;
      position: fixed;
      bottom: 0;
      left: 0;
      color: white;
      text-align: center;
      font-size: 0.8rem;
    }
    ul {
      padding: 0 15px;
      border-bottom: 6px solid #F3F3F3;
      li {
        height: 48px;
        line-height: 48px;
        border-bottom: 1px solid #F3F3F3;
        width: 100%;
        font-size: 15px;
        text-align: left;
        i {
          font-style: normal;
        }
        .fl {
          float: left;
          height: 20px;
          line-height: 20px;
          margin-top: 14px;
          text-align: center;
        }
        .o-num {
          display: inline-block;
          border-radius: 100%;
          border:1px solid black;
          width: 16px;
          height: 16px;
          margin-top: 15px;
          line-height:14px;
          font-size: 12px;
          box-sizing: border-box;
          padding: 0px 0 0 0;
          position: relative;

        }
        .fr {
          float: right;
          color: #777777;
        }
      }
    }
    .payment-info {
      padding: 0;
      li {
        height: auto;
        line-height: inherit;
        border-bottom: none;
        padding: 0 15px;
        box-sizing: border-box;
      }
      li:nth-child(2){
        border-bottom: 1px solid #f4f4f4;
      }
      .title {
        padding: 15px;
        border-bottom: 6px solid #F3F3F3;
        font-weight: 600;
      }
      .payment-item {
        display: flex;
        flex-direction: column;
        padding: 15px 10px;
        /*border: 1px solid #b4b4b4;*/
        border-radius: 3px;
        box-sizing: border-box;
        &>div {
          flex: 0 1 auto;
        }
        .panel {
          flex-grow: 1;
          img {
            margin-right: 8px;
            vertical-align: middle;
          }
          .name {
            font-size: 14px;
            line-height: 1;
            color: #000;
          }
          .radio {
            float: right;
            display: block;
            width: 15px;
            height: 15px;
            margin-top: 6px;
            background: url('../../../../images/icon_radio_gray.png') no-repeat;
            background-size: 100% 100%;
          }
        }
        .tips {
          font-size: 12px;
          line-height: 1.5;
          color: #777;
          margin-top: 0.2rem;
        }
      }
      .payment-item-selected {
        /*border-color: #ff9600;*/
        .panel {
          .radio {
            background-image: url('../../../../images/icon_radio_blue.png');
          }
        }
      }
    }
  }
</style>
<style lang="less">
  .dialog-hint{
    .weui-dialog{
      padding: 15px;
      box-sizing: border-box;
      color: #343434;
      text-align: left;
      overflow: initial;
      margin-top: -30px;
      .infoConfirm-hint{
        font-size: 22px;
        text-align: center;
      }
      .hint-black{
        font-size: 16px;
      }
      .hint-content{
        // display: block;
        font-size: 12px;
        color: #777;
        max-height:300px;
        overflow-y:scroll;
        li{
          margin-top: 20px;
          margin-bottom: 20px;
        }
      }
      .icon-close{
        display: block;
        width: 35px;
        height: 35px;
        position: absolute;
        bottom: -63px;
        left: 0;
        right: 0;
        margin: auto;
        background: url('../../../../images/icon_close.png') center no-repeat;
        background-size: 100%;
      }
    }
  }
  .fee-info{
    li{
      span{
        position: relative;
        padding: 5px 10px;
        margin-left: 5px;
        img{
          position: absolute;
          left: 0;
          top: 6px;
        }
      }
    }
  }
  .row-yajin {
    .weui-cell {
      padding: 0;
      font-size: 15px;
    }
    .weui-cells{
      &::before {
        border: none;
      }
      &::after {
        border: none;
      }
    }
    ul {
      li {
        height: 80px;
        line-height: 80px;
        .row {
          height: 25px;
          line-height: 25px;
        }
        p.row {
          padding-left: 38px;
          color: #979797;
          font-size: 12px;
        }
        .fl {
           margin-top: 0px;
        }
        .fr {
          height: 26px;
          line-height: 26px;
        }
      }
      .pingAn {
        height: 120px;
        line-height: 120px;
        .row__text {
           height: 23px;
          line-height: 31px;
        }
        .row__a {
          color: #ff9600;
        }
      }
      .li-row {
            margin-top: 10px;
      }
      .row1 {
        height: 58px;
      }
      .row2 {
        height: 80px;
      }
      .row3 {
        height: 58px;
      }
      .weui-cells_checkbox .weui-check:checked + .vux-checklist-icon-checked:before{
        color: #ff9600;
      }
    }
    .row-title {
      font-size: 15px;
      padding: 0 15px;
          height: 37px;
    line-height: 46px;

    }
  }
</style>
<style lang="less" scoped>
  .icon__check {
    font-style: normal;
    border-radius: 50%;
    display: inline-block;
    background-color: #ff9600;
    border: 1px solid transparent;
    width: 21px;
    height: 21px;
    float: left;
  }
  .icon__ok {
    .icon__check;
    &::before {
      content: "";
      width: 44%;
      height: 20%;
      display: inline-block;
      transform: rotate(-45deg);
      border-left: 1px solid white;
      border-bottom: 1px solid white;
      top: 7px;
      left: 6px;
    }
  }
  .icon__uncheck {
    .icon__check;
    border: 1px solid #C9C9C9;
    background-color: white;
  }
  .color__gray {
    color: #999;
  }
</style>